<template>
    <div>
        <el-dialog :title="dialogTitle" :visible.sync="addDialogShow" width="800px" :close-on-click-modal="false" :before-close="dialogHandleCancel">
            <el-form v-if="addDialogShow" ref="addForm" label-width="130px" :model="addForm" :rules="rules">
                <el-form-item label="分组名称:" prop="groupName">
                    <el-input maxlength="4" v-model.trim="addForm.groupName" placeholder="请输入分组名称"></el-input>
                </el-form-item>
                <el-form-item label="设置子分组:">
                    <el-input
                        v-model.trim="addForm.childrenName"
                        placeholder="请输入子分组名称，按回车完成，多个标签用‘，’（中文）隔开"
                        @input="updateInput"
                        @keyup.enter.native="handleInputConfirm"
                    ></el-input>
                </el-form-item>
                <el-form-item v-show="addForm.children && addForm.children.length > 0">
                    <div v-for="(tag, index) in addForm.children" :key="tag.key" class="madp-tag-item">
                        <el-input class="tag-input" v-model.trim="tag.groupName" placeholder="请输入子分组名称" maxlength="4"></el-input>
                        <i class="el-icon-bottom" v-show="index != addForm.children.length - 1" @click="handleDown(index)"></i>
                        <i class="el-icon-top" v-show="index != 0" @click="handleUp(index)"></i>
                        <i class="el-icon-close" @click="handleClose(index, tag)"></i>
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="dialogHandleCancel">取消</el-button>
                <el-button type="primary" @click="dialogHandleSubmit">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    props: {
        form: {
            type: Object,
            default: function() {
                return {
                    groupName: '',
                    deptIds: [],
                    children: []
                };
            }
        },
        addDialogShow: {
            type: Boolean
        },
        dialogTitle: {
            type: String
        }
    },
    data() {
        return {
            // 表单
            addForm: {},
            // 是否编辑
            dialogIsEdit: false,
            // 表单校验规则
            rules: {
                groupName: [
                    {
                        required: true,
                        message: '请输入分组名称',
                        trigger: 'blur'
                    }
                ]
            }
        };
    },
    watch: {
        addDialogShow: {
            handler(val) {
                if (val) {
                    this.initForm();
                }
            }
        }
    },
    methods: {
        // 初始化表单数据
        initForm() {
            this.addForm = JSON.parse(JSON.stringify(this.form));
            console.log('this.addForm', this.addForm);
        },
        // 弹窗点击取消
        dialogHandleCancel() {
            this.$emit('dialogHandleCancel');
        },
        // 弹窗点击确定
        dialogHandleSubmit() {
            this.handleInputConfirm();
            this.$refs.addForm.validate((valid) => {
                if (valid) {
                    this.$emit('dialogHandleSubmit', this.addForm);
                }
            });
        },
        // 删除单个标签
        handleClose(index, tag) {
            if (tag.groupId) this.addForm.needConfirm = true;
            this.addForm.children.splice(index, 1);
            this.$forceUpdate();
        },
        // 标签上移
        handleUp(index) {
            let item = JSON.parse(JSON.stringify(this.addForm.children[index]));
            this.addForm.children[index] = this.addForm.children[index - 1];
            this.addForm.children[index - 1] = item;
            this.$forceUpdate();
        },
        // 标签下移
        handleDown(index) {
            let item = JSON.parse(JSON.stringify(this.addForm.children[index]));
            this.addForm.children[index] = this.addForm.children[index + 1];
            this.addForm.children[index + 1] = item;
            this.$forceUpdate();
        },
        // 处理input框添加标签
        handleInputConfirm() {
            if (this.addForm.childrenName) {
                let inputArr = this.addForm.childrenName.split('，');
                inputArr.map((item, index) => {
                    let flag =
                        item.trim() == '' ||
                        this.addForm.children.some((i) => {
                            return i.groupName == item;
                        });
                    if (!flag) {
                        this.addForm.children.push({
                            groupName: item,
                            key: Math.random().toFixed(5) + index * Math.random().toFixed(5)
                        });
                    }
                });
                this.addForm.childrenName = '';
            }
        },
        // 更新输入内容
        updateInput() {
            let str = this.addForm.childrenName;
            str = str.replace(/\s+/g, '');
            let arr = str.split('，');
            arr = arr.map((i) => {
                if (i.length > 4) {
                    i = i.slice(0, 4);
                }
                return i;
            });
            this.addForm.childrenName = arr.join('，');
        }
    }
};
</script>
<style scoped lang="scss">
.madp-category-text {
    background: #effaff;
    display: inline-block;
    margin-bottom: 20px;
}
.madp-tag-item {
    display: flex;
    margin-bottom: 5px;
    .tag-input {
        width: 80%;
    }
    i {
        margin: 0.5rem;
        font-size: 1rem;
        cursor: pointer;
    }
}
</style>
